<template>
	<view class="page">
		<view class="row">
			<view class="label">
				{{language.topup.label1}}:
			</view>
			<view class="text">
				{{countMoneyObj.cardSn ? countMoneyObj.cardSn : '' }}
			</view>
		</view>
		<!-- <view class="row">
			<view class="label">
				{{language.topup.label2}}:
			</view>
			<view class="text red">
				{{countMoneyObj.lastDate ? countMoneyObj.lastDate : ''}}
			</view>
		</view> -->
		<view class="money red">
			￥{{countMoneyObj.accountBalance}} <text>{{language.topup.label3}}</text>
		</view>
		
		<view class="selectMoneyArr">
			<view :class="selectMoney==item ? 'selectItem item' : 'item'" v-for="(item,index) in moneyArr" 
			:key="index" @click="handleSelectMoney(item)">
				<text class="text">{{item}}</text>
			</view>
		</view>
		
		<view class="row">
			<view class="label">
				{{language.topup.label6}}:
			</view>
			<view class="text" style="font-weight: 600;">
				{{selectMoney}}
			</view>
		</view>
		
		<view class="row">
			<view class="label">
				{{language.topup.label7}}:
			</view>
			<view class="text red">
				{{selectMoney ? handleDeductionAmount : ''}}
			</view>
		</view>
		
		<view class="row">
			<view class="label">
				{{language.topup.label8}}:
			</view>
			<view class="text red">
				{{totalMoney}}
			</view>
		</view>
		
		<view class="textTitle">
			{{language.topup.label4}}
		</view>
		<view class="payType">
			<u-icon name="weixin-fill" color="#10d269" size="30"></u-icon>
			<text>
				{{language.topup.label5}}
			</text>
			<u-icon name="checkmark" color="#2979ff" size="28"></u-icon>
		</view>
		<view class="btn" @click="handleTopup">
			<text>{{language.topup.btn}}</text>
		</view>
		
	</view>
</template>

<!-- #ifdef H5 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!-- #endif -->
<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<!-- <script src="@/common/js/jweixin.js"></script> -->
<script>
	// import  wexinPay from '@/common/js/jweixin.js'
	// #ifdef H5
	// import  wexinPay from 'jweixin-module'
	// #endif
	import {reqRechargeApi,countAmtApi} from '@/common/api/commonApi/consumeApi.js'
	export default {
		data() {
			return {
				moneyArr:[
					10,30,50,100,150,200,300,500,
					// 0.01
				],
				
				selectMoney: '',
				countMoneyObj : {
					accountBalance : '0.00',
					lastDate : ''
				},
				deductionAmount: '',
				serviceCharge :'',
				cardSn : '',
				selectInfoAccount : uni.getStorageSync('selectInfoAccount'),
			}
		},
		computed: {
			handleDeductionAmount(){
				return this.selectMoney ? (this.selectMoney*this.deductionAmount).toFixed(2) : ''
			},
			totalMoney(){
				return this.handleDeductionAmount ? Number(this.handleDeductionAmount)+Number(this.selectMoney) : ''
			}
		},
		methods: {
			getCountMoney(){
				// let memberId = '2455528'
				// let memberId = this.selectInfoAccount.id
				return countAmtApi({
					// memberId 
				}).then(res=>{
					this.countMoneyObj = res.result
					this.deductionAmount = res.result.deductionAmount
				})
			},
			handleSelectMoney(item){
				this.selectMoney = item
			},
			
			handleTopup(){
				if(!this.selectMoney) return this.setMessage('请先选择充值金额')
				let info = uni.getStorageSync('selectInfoAccount')
				let memberId = info.id
				// let memberId = '2455528'
				let data = {
					amount : this.selectMoney,
				}
				// #ifdef MP-WEIXIN
					data.tradeType = 'JSAPI'
					data.openId = uni.getStorageSync('openId')
				// #endif
				// #ifdef H5
					data.tradeType = 'MWEB'
					data.openId = uni.getStorageSync('oaopenid')
					// data.openId = 'o3vS_jjU1e8FNQGgohkKjIfivgkU'
				// #endif
				
				reqRechargeApi(data).then(res=>{
					let result = res.result
					// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr :  res.result.nonce_str,
							package : `prepay_id=${res.result.prepay_id}`,
							paySign : res.result.sign,
							signType : 'MD5',
							timeStamp: String(res.result.timeStamp),
							success:() =>{
								this.getCountMoney().then(res=>{
									this.setMessage('支付成功')
								})
							},
							fail: (err) => {
								console.log(err);
								this.setMessage('支付取消或失败')
							}
						})
					// #endif
					// #ifdef H5
					WeixinJSBridge.invoke(
					    'getBrandWCPayRequest', {
					       "appId": result.appid,     //公众号ID，由商户传入     
					       "timeStamp": String(result.timeStamp),         //时间戳，自1970年以来的秒数     
					       "nonceStr": result.nonce_str, //随机串     
					       "package":`prepay_id=${result.prepay_id}`,     
					       "signType":"MD5",         //微信签名方式：     
					       "paySign": result.sign //微信签名 
					    },
					    function(res){
					    if(res.err_msg == "get_brand_wcpay_request:ok" ){
					    // 使用以上方式判断前端返回,微信团队郑重提示：
					          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
					    } 
					 })
					 return
					// #endif
				
				})
			},
			wxpay(data) {
			      if (typeof WeixinJSBridge == "undefined") {
			        if (document.addEventListener) {
			          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false);
			        } else if (document.attachEvent) {
			          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data));
			          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data));
			        }
			      } else {
			        this.onBridgeReady(data);
			      }
			    },
			onBridgeReady(data) {
					console.log(data);
			        WeixinJSBridge.invoke(
			          'getBrandWCPayRequest', {
			             // 传入第一步后端接口返回的核心参数
			            "appId": data.appid, //公众号
			            "timeStamp": data.timeStamp, //时间戳
			            "nonceStr": data.nonce_str, //随机串
			            "package": `prepay_id=${data.prepay_id}`, //prepay_id
			            "signType": 'MD5', //微信签名方式RSA
			            "paySign": data.sign //微信签名
			          },
			          function(res) {
			            // 支付成功
			            if (res.err_msg == "get_brand_wcpay_request:ok") {
			              // 使用以上方式判断前端返回,微信团队郑重提示：
			              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			            }
			            // 支付过程中用户取消
			            if (res.err_msg == "get_brand_wcpay_request:cancel") {
			
			            }
			            // 支付失败
			            if (res.err_msg == "get_brand_wcpay_request:fail") {
			
			            }
			            /**
			            * 其它
			            * 1、请检查预支付会话标识prepay_id是否已失效
			            * 2、请求的appid与下单接口的appid是否一致
			            * */
			            if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
			
			            }
			          });
			    },
		},
		
		onLoad() {
			// console.log(wexinPay);
			// console.log(WeixinJSBridge);
			// console.log(WeixinJSBridge.invoke);
			console.log(111);
			this.setPageTitle(this.language.topup.title)
			let info = uni.getStorageSync('selectInfoAccount')
			this.cardSn = info.cardSn
		},
		onShow() {
			this.getCountMoney()
		},
	}
	
</script>

<style lang="scss" scoped>
.page{
	background-color: #fff;
	height: 100vh;
	.text{
		color: #333;
	}
	.row{
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 2rpx solid #f1f1f1;
		&:nth-child(1){
			border-top: 2rpx solid #f1f1f1;
		}
		.label{
			margin: 0 30rpx;
		}
	
	}
	.red{
		color: #fe415c;
	}
	.money{
		height: 100rpx;
		@include flexCenter;
		font-size: 36rpx;
		border-bottom: 2rpx solid #f1f1f1;
		text{
			font-size: 28rpx;
			color: #333;
			margin-left: 5rpx;
		}
	}
	.selectMoneyArr{
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 40rpx;
		// justify-content: space-between;
		.item{
			width: 200rpx;
			height: 120rpx;
			@include flexCenter;
			font-size: 36rpx;
			border-radius: 10rpx;
			border: 2rpx solid #f1f1f1;
			margin: 10rpx;
		}
		.selectItem{
			border: 0;
			background: #2d8cf6;
			text{
				color: #ffffff !important;
			}
		}
	}
	.textTitle{
		margin-top: 40rpx;
		font-size: 30rpx;
		padding-left: 50rpx;
		color: #000;
	}
	.payType{
		display: flex;
		align-items: center;
		height: 110rpx;
		padding: 0 50rpx;
		width: 100%;
		image{
			width: 50rpx;
		}
		text{
			color: #000;
			flex: 1;
			padding-left: 20rpx;
			white-space: nowrap;
			font-size: 30rpx;
		}
	}
	.btn{
		margin: 20rpx auto 0;
		background: #2d8cf6;
		@include flexCenter;
		width: 90vw;
		height: 92rpx;
		border-radius: 10rpx;
		text{
			color: #fff;
		}
	}
	
}
</style>
